



@media (min-width: 25rem) {
    .box-article-information-title {
        max-width: 6em;
    }
}

@media (min-width: 26rem) {
    .box-article-information-title {
        max-width: 7em;
    }
}

@media (min-width: 28rem) {
    .box-article-information-title {
        max-width: 8em;
    }
}

@media (min-width: 30rem) {
    .box-article-information-title {
        max-width: 9em;
    }
}

@media (min-width: 32rem) {
    .box-article-information-title {
        max-width: 10em;
    }
}

@media (min-width: 35rem) {
    .copyright {
        width: auto;
    }

    .box-article-information-title {
        max-width: 12em;
    }
}

@media (min-width: 40rem) {
    .box-article-information-title {
        max-width: 14em;
    }
}

@media (min-width: 45rem) {
    .box-article-information-title {
        max-width: 16em;
    }
}

@media (min-width: 50rem) {
    .box-article-information-title {
        max-width: 18em;
    }
}

@media (min-width: 60rem) {
    .box-article-information-title {
        max-width: 20em;
    }
}




@media (min-width: 30rem) {

    .box-article-information-date {
        width: 5em;
    }


    .list-lr-item-right-detail {
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }
    
    
}


/* nav hide */
@media (min-width: 40rem) {

    body > header nav.close,
    .page-header nav.close,
    .nav.close {
        margin-top: 0;
        /* background: none; */
        visibility: hidden;
        width: auto;
        height: 100%;
        transform-origin: center top;
        transition: width 0s, visibility 1s;
        animation: nav-hide 1s;
    }
    

    body > header nav.close *,
    body > header nav.close .nav-item,
    .page-header nav.close *,
    .page-header nav.close .nav-item,
    .nav.close *,
    .nav.close .nav-item {
        visibility: visible;
    }

    body > header nav.close > ul,
    body > header nav.close > .nav-item,
    .page-header nav.close > ul,
    .page-header nav.close > .nav-item,
    .nav.close > ul,
    .nav.close > .nav-item {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }


    body > header nav,
    .page-header nav,
    .nav {
        margin-top: 0;
        /* background: none; */
        visibility: hidden;
        width: 12%;
        height: 100%;
        transform-origin: center top;
        transition: width 0s, visibility 1s;
        animation: nav-hide 1s;
    }
    

    body > header nav:hover,
    .page-header nav:hover,
    .nav:hover {
        cursor: default;
        background: none;
    }

    body > header nav *,
    .page-header nav *,
    .nav *,
    .nav .nav-item {
        visibility: visible;
        transition: visibility 1s;
        transform: translateY(0%);
        animation: nav-item-show 1s;
    }
    
}


@media (min-width: 25rem) {
    body > header,
    .page-header {
        min-height: 6rem;
    }

    body > header .header-title,
    .page-header .header-title,
    .page-header .page-header-title {
        font-size: var(--font-size-x-large);
    }
}


@media (min-width: 35rem) {
    .list-lr-item-right-detail {
        -webkit-line-clamp: 7;
        line-clamp: 7;
    }
}


@media (min-width: 40rem) {

    body > header,
    .page-header {
        gap: 2em;
        min-height: 7rem;
    }

    body > header nav,
    .page-header nav,
    .nav {
        width: 10%;
    }


    .tabs-title {
        font-size: var(--font-size-x-large);
    }

}



@media (min-width: 45rem) {

    body > header,
    .page-header {
        min-height: 8rem;
    }
    body > header .header-title,
    .page-header .header-title,
    .page-header .page-header-title {
        font-size: var(--font-size-xx-large);
    }

    .list-lr-item-right-detail {
        -webkit-line-clamp: 9;
        line-clamp: 9;
    }
    
}



@media (min-width: 50rem) {
    .box {
        width: 98%;
    }


    .box-article-information-title {
        font-size: var(--font-size-large);
    }
}


